<template>
  <card-component :content-title="contentTitle"
                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"></table-component>

  </card-component>

</template>


<script>
  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'
  import util from '@/common/js/util'

  export default {
    name: "programe-content-component",
    data() {
      return {
        chanxian: '',
        contentTitle: this.$getTextByLangKey('程序列表'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
      }
    },

    created: function () {

      this.fetchData()
    },

    destroyed: function () {
      this.stopTimer()
      console.log('---- destroyed ----')
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {
      fetchData: function () {

        this.stopTimer()

        this.tableHeader =  []
        this.tableData = []

        this.chanxian = this.$route.query.chanxian
        this.contentTitle = this.chanxian + this.$getTextByLangKey('程序列表')
//        this.requestProgramList()
//        if (this.$route.path === '/wrapper/programlist') {
//
//        } else if (this.$route.path === '/wrapper/programfilelist') {
//          this.requestProgramFileList()
//        }

        this.creatTimer()

      },

      creatTimer:function () {
        this.autoRequest()
        this.timer = setInterval(()=>{
          if(!this.isRequesting){
//            console.log('开始自动请求')
            this.autoRequest()
          }else{
//            console.log('请求结果未返回')
          }
        },1500)
      },
      stopTimer:function () {
        clearTimeout(this.timer)
        this.isRequesting = false
      },

      autoRequest:function () {
        this.isRequesting = true

        console.log('请求余量的程序列表')

        request.requestProgramList(this.chanxian, this.page.currentPage, 20, res => {
          this.isRequesting = false
          let list = res.data.data.list
          let header = res.data.data.header
          let programHeader = [{type: 'index', isShow: true, width: '65', label: 'NO.'},]
          let programList = []
          header.forEach(item => {

            if (item.prop === 'programName') {
              item.isShow = true
              item.type = 'link'
            }
            programHeader.push(item)
          })

          list.forEach(item => {
            item.isShowHighLight = item.isSurplusShowHighLight
            item.programName_link = "./#/wrapper/surpluslist?chanxian=" + item.lineName + "&program=" + item.programName; //这里要programName可点击，所以需要添加属性programName_link
            programList.push(item)
          })

          this.tableHeader = programHeader
          this.tableData = programList

//          this.page.currentPage = res.data.data.pageNum
          this.page.total = res.data.data.total
          this.page.pageSize = res.data.data.pageSize

        },res=>{
          this.isRequesting = false
        })



      },





      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.autoRequest()
      },
    },
    components: {
      'table-component': table,
      'card-component': card,
    },

  }
</script>


<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border: none;
  }
</style>


